<template>
  <section class="demo-section">
    <div class="demo-header">
      <h2 class="demo-title">1. CSS v-bind 特性演示 (Vue 3.2+)</h2>
      <p class="demo-description">
        CSS v-bind 允许你在 CSS 中直接绑定 Vue 组件的数据。这是 Vue 3.2+ 引入的强大特性，
        让样式能够响应式地根据组件状态变化，无需复杂的类名切换或内联样式。
      </p>
    </div>

    <div class="demo-content">
      <div class="controls">
        <div class="control-group">
          <label>主题色彩:</label>
          <input v-model="themeColor" type="color" class="color-picker" />
        </div>
        <div class="control-group">
          <label>字体大小: {{ fontSize }}px</label>
          <input
            v-model.number="fontSize"
            type="range"
            min="12"
            max="32"
            class="slider"
          />
        </div>
        <div class="control-group">
          <label>旋转角度: {{ rotation }}°</label>
          <input
            v-model.number="rotation"
            type="range"
            min="0"
            max="360"
            class="slider"
          />
        </div>
      </div>

      <div class="css-bind-demo">
        <div class="dynamic-box">
          <h3>🎨 CSS v-bind 实时演示</h3>
          <p>这个盒子的样式完全由 CSS v-bind 控制</p>
          <div class="feature-list">
            <span class="feature-tag">颜色绑定</span>
            <span class="feature-tag">大小绑定</span>
            <span class="feature-tag">变换绑定</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from "vue";

// CSS v-bind 相关状态
const themeColor = ref("#667eea");
const fontSize = ref(16);
const rotation = ref(0);
</script>

<style scoped>
/* CSS v-bind 演示样式 */
.dynamic-box {
  background: linear-gradient(135deg, v-bind(themeColor), rgba(255, 255, 255, 0.1));
  font-size: v-bind(fontSize + "px");
  transform: rotate(v-bind(rotation + "deg"));
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin: 2rem 0;
}

.demo-section {
  background: white;
  margin-bottom: 3rem;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.demo-header {
  margin-bottom: 2rem;
}

.demo-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.demo-description {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.7;
  background: #f8fafc;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.demo-content {
  display: grid;
  gap: 2rem;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: #f1f5f9;
  border-radius: 8px;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.control-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
}

.color-picker,
.slider {
  padding: 0.5rem;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  transition: border-color 0.3s ease;
}

.color-picker {
  width: 60px;
  height: 40px;
  cursor: pointer;
}

.slider {
  width: 120px;
}

.color-picker:focus,
.slider:focus {
  outline: none;
  border-color: #667eea;
}

.css-bind-demo {
  display: flex;
  justify-content: center;
}

.dynamic-box h3 {
  margin: 0 0 1rem 0;
  font-size: 1.5em;
}

.dynamic-box p {
  margin: 0 0 1rem 0;
  opacity: 0.9;
}

.feature-list {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.feature-tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 500;
}

@media (max-width: 768px) {
  .controls {
    flex-direction: column;
    align-items: stretch;
  }

  .control-group {
    width: 100%;
  }
}
</style>
